<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./lib/nprogress/nprogress.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>Document</title>
</head>

<body>
    <div class="lt-index">
        <!-- 侧边栏 -->
        <div class="lt-sidebar">
            <a href="index.html" class="gohome">我想回家!!</a>
            <img src="./images/default.png" alt="">
            <p>超级管理员</p>
            <!-- 导航 -->
            <ul class="lt-nav">
                <li class="current"><span class="glyphicon glyphicon-user"> </span> <a href="user.html"> 用户管理</a></li>
                <li class="category">
                    <span class="glyphicon glyphicon-list"> </span><a href="#"> 分类管理</a>
                    <div class="child" style="display:none">
                        <a href="first.html">一级分类</a><br>
                        <a href="second.html">二级分类</a>
                    </div>
                </li>
                <li><span class="glyphicon glyphicon-tags"> </span><a href="product.html"> 商品管理</a></li>
            </ul>
        </div>
        <div class="lt-subject">
            <!-- 主体部分 -->
            <div class="lt-subject">
                <!-- 头部 -->
                <div class="lt-header">
                    <span class="glyphicon glyphicon-align-justify pull-left lt-menu"></span>
                    <span class="glyphicon glyphicon-log-out pull-right" data-toggle="modal" data-target="#myModal"></span>

                </div>
                <!--  列表 -->
                <div class="container-fluid" style="margin-top: -30px;">   
                    <div class="lt-content">
                            <ol class="breadcrumb">
                                    <li><a href="index.html">管理系统</a></li>
                                    <li class="active">用户管理</li>
                                </ol>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th width="10%">序号</th>
                                    <th width="20%">用户名</th>
                                    <th width="30%">手机号</th>
                                    <th width="20%">状态</th>
                                    <th width="20%">操作</th>
                                </tr>
                            </thead>
                            <tbody class="table table-bordered table-hover ">
                                <!-- 刨个坑 -->
                            </tbody>
                        </table>
                        <!--boostrap分页插件如果是3.0版本，要求这个盒子必须是ul-->
                        <div class="pull-right">
                            <ul id="paginator"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" style="text-align: center"  id="userModal" tabindex="-1" role="dialog">
        <div class="modal-dialog  modal-sm" role="document">
          <div class="modal-content ">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">温馨提示</h4>
            </div>
            <div class="modal-body">
              <p>您确定要执行此操作吗?</p>
            </div>
            <div class="modal-footer">
                <!-- data-dismiss 点击时消失 -->
                <button type="button" data-dismiss="modal" class="btn btn-default " data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-ok">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

<!-- 退出模态框 -->
<div class="modal fade" tabindex="-1" id="myModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">温馨提醒</h4>
            </div>
            <div class="modal-body">
                <p>您确定要退出吗</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary  lt-quit">退出</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


    <script type="text/html" id="tmp">
        {{ each rows v i }}
            <tr>            
                <td>{{i+1 + size * (page-1)}}</td>
                <td>{{v.username}}</td>
                <td>{{v.mobile}}</td>
                <td>{{v.isDelete == 1 ?'正常':'禁用' }}</td>
                <td data-id={{v.id}}>
                    {{ if v.isDelete == 1 }}
                        <button class="btn btn-danger btn-user">禁用</button>
                    {{ else }}
                        <button class="btn btn-user btn-success">启用</button>
                    {{/if }}
                </td>
            </tr>
        {{ /each }}
    </script>

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/nprogress/nprogress.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./lib/bootstrap-paginator/bootstrap-paginator.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/user.js"></script>
    <script src="./js/isLogin.js"></script>
</body>

</html>